{% extends 'admin/extende/base.html' %}

{% block title %}
<title>会员添加</title>
{% endblock %}


{% block context %}
    <div class="container-fluid am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span>会员添加</div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-body am-fr">

                    <form action="{% url 'admin_user_insert' %}" method="post" enctype="multipart/form-data" class="am-form tpl-form-border-form tpl-form-border-br">
                        {% csrf_token %}
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">用户名</label>
                            <div class="am-u-sm-9">
                                <input name="username" type="text" class="tpl-form-input" id="user-name" required>
                                <small>请输入您的用户名。</small>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">密码 </label>
                            <div class="am-u-sm-9">
                                <input name="password" type="password" class="tpl-form-input" id="user-name" required minlength="6" maxlength="18">
                                <small>请输入6-18位密码。</small>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">手机号 </label>
                            <div class="am-u-sm-9">
                                <input name="phone" type="number" class="tpl-form-input" id="user-name" minlength="11" maxlength="11">
                                <small>请输入正确的手机号。</small>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">邮箱 </label>
                            <div class="am-u-sm-9">
                                <input name="email" type="email" class="tpl-form-input" id="user-name" >
                                <small>请填写正确的邮箱。</small>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">年龄 </label>
                            <div class="am-u-sm-9">
                                <input name="age" type="number" class="tpl-form-input" id="user-name" >
                                <small>请填写您的年龄。</small>
                            </div>
                        </div>

                        <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-3 am-form-label">
                                 性别
                                 </label>
                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" value="1" > 男
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" value="0" > 女
                                </label>
                        </div>


                        <div class="am-form-group">
                            <label for="user-weibo" class="am-u-sm-3 am-form-label">上传头像 </label>
                            <div class="am-u-sm-9">
                                <div id="upimg" class="am-form-group am-form-file">
                                    <div class="tpl-form-file-img" id="showimg">
                                        <img src=" " alt="" width="100">
                                    </div>
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i> 点击上传
                                    </button>
                                    <input name="pic" id="doc-form-file" type="file" multiple="">
                                </div>

                            </div>
                        </div>
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <button class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block jq %}
    <script>
        $("#doc-form-file").uploadView({
        uploadBox: '#upimg',//设置上传框容器
        showBox : '#showimg',//设置显示预览图片的容器
        width : 100, //预览图片的宽度，单位px
        height : 100, //预览图片的高度，单位px
        allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型
        maxSize :2, //允许上传图片的最大尺寸，单位M
        success:function(e){
            $(".js_uploadText").text('更改');
        }
    });
    </script>
{% endblock %}
